<!DOCTYPE html>
<html class="mdd-index" style="font-size: 12px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>首页</title>
    <meta name="charset" content="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,height=device-width,width=device-width">
    <!--<meta name="viewport" content="width=device-width,height=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">-->
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="version" content="ddtouch">
    <meta http-equiv="Cache-Control" content="must-revalidate,no-cache">
</head>
<style type="text/css">
    body{
        background-color: #eee;
        padding: 0;
        min-width: 300px;
        max-width: 667px;
        max-height: 100%;
        margin: 0 auto;
    }
</style>
<body>

    <div style="height:90%">
        <div style="position: absolute;top: 46px;left: 24px;width: 150px;">
            <span style="position:relative;display: inline-block;float:left;z-index:100">
                <img id="user-header" style="border-radius:50%;width:50px;height: 50px;vertical-align: middle;">
            </span>
            <div style="margin-top:8px;left:34px;position:absolute;display:inline-block;
            background-color:rgba(0,0,0,0.5);border-radius: 300px;padding-left: 20px;padding-right:10px;color:#ffffff;">
                <div><span id="user-nickName"></span></div>
                <small>ID:<span id="user-id"></span></small>
            </div>
        </div>
        <img id="screenshot" width="100%" height="90%">
        <video id="media_path" controls style="display: none;width: 100%;height: 100%;cursor: pointer;text-align: center;vertical-align: middle;">
            你的浏览器不支持 <code>video</code> 标签.
        </video>
        <div style="width: 100%;text-align: center;position: absolute;top:45%">
            <img src="../img/h5/Play_button.png" height="80px" width="80px" id="play_btn" style="display: none"/>
        </div>
    </div>


    <div style="position:fixed;bottom: 0px;height: 10px;width: 100%;background-color:rgba(0,0,0,0.5);text-align: center;height:80px;line-height: 80px;">
        <div style="float: left;margin-left: 24px;margin-top:12px">
            <img src="../img/h5/Ubi-icon.png" style="width: 60px;height: 60px"/>
        </div>

        <div style="float: right;margin-right: 14px">
            <img id="open_btn" src="../img/h5/button_unfold.png" style="vertical-align:middle;width: 60px;height: 30px"/>
            <img id="download_btn" src="../img/h5/button_download.png" style="vertical-align:middle;width: 60px;height: 30px"/>
        </div>
    </div>



</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    //TODO 需要修改域名
    var hostname="http://www.ubiiii.xyz:48080/ubi";
//    var hostname="http://192.168.0.100:8080";

    var download_url = "https://itunes.apple.com/cn/app/ubi-%E5%B9%B4%E8%BD%BB%E4%BA%BA%E7%9A%84%E7%9F%AD%E8%A7%86%E9%A2%91%E7%9E%8Ebibi%E7%A4%BE%E4%BA%A4%E5%B9%B3%E5%8F%B0/id1214755691?mt=8";
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    jQuery(function ($) {

        $("#open_btn").click(function () {
            window.location.href = 'ubi://';
        });

        $("#download_btn").click(function () {
            window.location.href = download_url;
        });

        $("#play_btn").click(function () {
            $(this).hide();
            $("#screenshot").hide();
            $("#media_path").show();
            $("#media_path").get(0).play();
        });

        $.ajax({
            url: hostname + "/share/coolGet",
            dataType: 'json',
            type: "post",
            data: {"cool_id": getQueryString("cool_id")},
            success: function (data) {
                if (data.code == 200) {
                    $("#user-id").html(data.data.user_id);
                    $("#user-nickName").html(data.data.nick_name);
                    $("#user-header").attr("src",data.data.user_img);
                    $('#media_screenshot').attr("src",data.data.screenshot);
                    if(data.data.cool_type == "COOL_VIDEO"){
                        $("#play_btn").show();
                        $('#screenshot').attr("src",data.data.screenshot);
                        $('#media_path').attr("src",data.data.media_path);
                    }
                } else {
                    alert("服务器异常，请联系管理员！");
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("服务器异常，请联系管理员！");
            }
        });
    });
</script>
</html>
